import React from 'react';
import {AMapSdk} from 'react-native-amap3d';
import {Platform} from 'react-native';
AMapSdk.init(
  Platform.select({
    android: 'c52c7169e6df23490e3114330098aaac',
    ios: '186d3464209b74effa4d8391f441f14d',
  }),
);
import TabBar_SVG from '../public/icons/tabBarIcon';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import Home from '../components/home';
import Community from '../components/community';
import Mine from '../components/mine';
import TrainSelector from '../components/trainSelector';
import Record from '../components/record';
import Summary from '../components/summary';
import PaperDetail from '../components/paperDetail';
import AddPaper from '../components/addPaper';
import ExistCommunity from '../components/existCommunity';
import AddCommunity from '../components/addCommunity';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabView = props => {
  const {navigation} = props;
  const navigateTo = (routeName,params) => {
    navigation.navigate(routeName,params);
  };
  return (
    <NavigationContainer independent={true}>
      <Tab.Navigator
        initialRouteName="首页"
        backBehavior="none"
        screenOptions={({route}) => ({
          tabBarIcon: ({focused}) => {
            let iconName;
            if (route.name === '首页') {
              iconName = focused ? 'coloredHome' : 'home';
            } else if (route.name === '社区') {
              iconName = focused ? 'coloredCommunity' : 'community';
            } else if (route.name === '我的') {
              iconName = focused ? 'coloredMine' : 'mine';
            }
            return <TabBar_SVG name={iconName}></TabBar_SVG>;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
          headerShown: false,
        })}>
        <Tab.Screen
          name="社区"
          component={Community}
          initialParams={{navigateTo}}
        />
        <Tab.Screen name="首页" component={Home} initialParams={{navigateTo}} />
        <Tab.Screen name="我的" component={Mine} initialParams={{navigateTo}} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

const MyStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="TabView"
        component={TabView}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="TrainSelector"
        component={TrainSelector}
        options={{
          title: '训练动作',
          headerStyle: {
            backgroundColor: '#f4511e',
            justifyContent: 'center',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
      <Stack.Screen
        name="PaperDetail"
        component={PaperDetail}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Summary"
        component={Summary}
        options={{
          title: '分析结果',
          headerStyle: {
            backgroundColor: '#f4511e',
            justifyContent: 'center',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
      <Stack.Screen
        name="Record"
        component={Record}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="AddPaper"
        component={AddPaper}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="ExistCommunity"
        component={ExistCommunity}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="AddCommunity"
        component={AddCommunity}
        options={{headerShown: false}}
      />
    </Stack.Navigator>
  );
};

function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

export default App;
